<template>
  <div class="main-con hbox flex1">
    <div class="vbox flex1" style="border-right:10px solid #eee">
      <div slot="header">
        <div class="relative">
          常量类型
          <span class="header-btns">
            <el-button
              size="mini"
              icon="el-icon-plus"
              @click="openAddDict"
              v-auth="'add'"
              type="primary"
            >新增类型</el-button>
          </span>
        </div>
        <div class="search-con">
          <el-form :model="searchDictParam" ref="dictSearchForm" :inline="true">
            <el-form-item>
              <el-input
                v-model="searchDictParam.dictName"
                @keyup.enter.native="searchDict"
                placeholder="输入类型名称查询"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchDict">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <base-table
        @row-click="getDataList"
        @row-dblclick="editDict"
        ref="dictTable"
        url="sysDict/getPage"
        :param="searchDictParam"
        :cls="dictcls"
      ></base-table>
    </div>
    <div class="vbox flex1">
      <div slot="header">
        <div class="relative">
          常量值
          <span class="header-btns">
            <el-button
              size="mini"
              icon="el-icon-plus"
              :disabled="!dictData.dictValue"
              @click="openAddDictData"
              v-auth="'add_data'"
              type="primary"
            >新增常量</el-button>
          </span>
        </div>
        <div class="search-con">
          <el-form :model="searchDataParam" ref="dictDataSearchForm" :inline="true">
            <el-form-item>
              <el-input
                v-model="searchDataParam.dictdataName"
                @keyup.enter.native="searchDictData"
                placeholder="输入常量值查询"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchDictData">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <base-table
        :auto-load="false"
        @handlerOption="handlerOption"
        :option-btns="dataOptionBtns"
        @row-dblclick="editDictData"
        ref="dictDataTable"
        url="sysDictData/getPage"
        :param="searchDataParam"
        :cls="datacls"
      ></base-table>
    </div>
    <el-dialog title="新增/编辑常量类型" :visible.sync="showAddDict" :width="'30%'">
      <el-form :model="dict" ref="dictForm" :rules="dictRules" label-width="115px">
        <el-form-item label="常量类型编码" prop="dictValue">
          <el-input :disabled="isEdit" v-model="dict.dictValue" placeholder="请输入类型编码"></el-input>
        </el-form-item>
        <el-form-item label="常量类型名称" prop="dictName">
          <el-input v-model="dict.dictName" placeholder="请输入类型名称"></el-input>
        </el-form-item>
        <el-form-item label>
          <el-button icon="el-icon-check" type="primary" @click="saveDict">保存</el-button>
          <el-button icon="el-icon-refresh" :disabled="isEdit">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="新增/编辑常量" :visible.sync="showAddDictData" :width="'30%'">
      <el-form :model="dictData" ref="dictDataForm" :rules="dictDataRules" label-width="115px">
        <el-form-item label="常量类型">
          <el-input disabled v-model="dictData.dictName" placeholder="请输入类型编码"></el-input>
        </el-form-item>
        <el-form-item label="常量值" prop="dictdataValue">
          <el-input
            :disabled="!dictData.isFixed && isEditDictData"
            v-model="dictData.dictdataValue"
            placeholder="请输入常量值"
          ></el-input>
        </el-form-item>
        <el-form-item label="常量内容" prop="dictdataName">
          <el-input
            :disabled="!dictData.isFixed && isEditDictData"
            v-model="dictData.dictdataName"
            placeholder="请输入常量显示内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否可更改" prop="isFixed">
          <el-switch :disabled="!dictData.isFixed && isEditDictData" v-model="dictData.isFixed"></el-switch>
        </el-form-item>
        <el-form-item label>
          <el-button icon="el-icon-check" type="primary" @click="saveDictData(true)">保存</el-button>
          <el-button icon="el-icon-d-arrow-right" v-if="!isEditDictData" @click="goOnsave">保存并继续</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showAddDict: false,
      showAddDictData: false,
      isEdit: false,
      isEditDictData: false,
      dict: {
        id: "",
        dictName: "",
        dictValue: ""
      },
      dictData: {
        id: "",
        dictValue: "",
        dictdataName: "",
        dictdataValue: "",
        isFixed: true
      },
      dictRules: {
        dictValue: [
          {
            required: true,
            message: "请输入常量编码",
            trigger: ["change", "blur"]
          }
        ],
        dictName: [
          {
            required: true,
            message: "请输入常量名称",
            trigger: ["change", "blur"]
          }
        ]
      },
      dictDataRules: {
        dictdataValue: [
          { required: true, message: "请输入常量值", trigger: "blur" }
        ],
        dictdataName: [
          {
            required: true,
            message: "请输入常量显示内容",
            trigger: "blur"
          }
        ]
      },
      dictcls: [
        { prop: "dictValue", label: "常量类型" },
        { prop: "dictName", label: "类型名称" }
      ],
      datacls: [
        { prop: "dictdataValue", label: "常量值" },
        { prop: "dictdataName", label: "常量名称" }
      ],
      searchDictParam: {
        dictName: "",
        dictValue: ""
      },
      searchDataParam: {
        dictdataName: "",
        dictValue: ""
      },
      dataOptionBtns: [
        {
          code: "value_list_delete",
          text: "删除",
          render(row) {
            return row.isFixed;
          }
        }
      ]
    };
  },
  mounted() {
    this.defaultDict = JSON.parse(JSON.stringify(this.dict));
    this.defaultDictData = JSON.parse(JSON.stringify(this.dictData));
  },
  methods: {
    handlerOption(code, row) {
      if (code == "value_list_delete") {
        this.deleteDictData(row.id);
      }
    },
    searchDict() {
      this.$refs["dictTable"].setCurPage(1);
      this.$refs["dictTable"].load();
    },
    searchDictData() {
      if (this.searchDataParam.dictValue) {
        this.$refs["dictDataTable"].setCurPage(1);
        this.$refs["dictDataTable"].load();
      }
    },
    getDataList(row) {
      this.searchDataParam.dictValue = row.dictValue;
      this.dictData.dictValue = row.dictValue;
      this.dictData.dictName = row.dictName;
      this.searchDictData();
    },
    openAddDict() {
      let me = this;
      if (me.$refs["dictForm"]) {
        me.$refs["dictForm"].resetFields();
      }
      me.dict = Object.assign(me.$data.dict, me.defaultDict);
      me.isEdit = false;
      me.showAddDict = true;
    },
    openAddDictData() {
      let me = this;
      if (me.$refs["dictDataForm"]) {
        me.$refs["dictDataForm"].resetFields();
      }
      me.dictData = Object.assign(me.$data.dictData, me.defaultDictData);
      me.dictData.dictValue = me.searchDataParam.dictValue;
      me.isEditDictData = false;
      me.showAddDictData = true;
    },
    editDict(row) {
      let me = this;
      if (me.$refs["dictForm"]) {
        me.$refs["dictForm"].resetFields();
      }
      let tempDict = Object.assign(me.$data.dict, row);
      me.dict = tempDict;
      me.dictData.dictValue = me.dict.dictValue;
      me.dictData.dictName = me.dict.dictName;
      me.isEdit = true;
      me.showAddDict = true;
    },
    editDictData(row) {
      let me = this;
      if (me.$refs["dictDataForm"]) {
        me.$refs["dictDataForm"].resetFields();
      }
      let tempDictData = Object.assign(me.$data.dictData, row);
      console.log(tempDictData);
      me.dictData = tempDictData;
      me.isEditDictData = true;
      me.showAddDictData = true;
    },
    deleteDictData(id) {
      let me = this;
      me.$confirm("确定要删除该常量吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          me.$http.ajax({
            url: "sysDictData/delete/" + id,
            success: res => {
              me.$message({
                type: "success",
                message: "删除成功!"
              });
              me.$refs["dictDataTable"].load();
            }
          });
        })
        .catch(() => {});
    },
    saveDict() {
      let me = this;
      me.$refs["dictForm"].validate(valid => {
        if (valid) {
          me.$http.ajax({
            url: "sysDict/save",
            data: me.dict,
            success: res => {
              me.$message({
                type: "success",
                message: "保存成功"
              });
              me.$refs["dictTable"].load();
              me.showAddDict = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    saveDictData(from) {
      let me = this;
      me.$refs["dictDataForm"].validate(valid => {
        if (valid) {
          me.$http.ajax({
            url: "sysDictData/save",
            data: me.dictData,
            success: res => {
              me.$message({
                type: "success",
                message: "保存成功"
              });
              me.$refs["dictDataTable"].load();
              if (!from) {
                me.dictData.dictdataName = "";
                me.dictData.dictdataValue = "";
                me.dicDataIsFixed = true;
                if (me.$refs["dictDataForm"]) {
                  me.$refs["dictDataForm"].clearValidate();
                }
                return;
              }
              me.showAddDictData = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    goOnsave() {
      let me = this;
      me.saveDictData();
    }
  }
};
</script>
<style scoped>
</style>


